<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.8.3.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/search.css" />
		<link rel="stylesheet" type="text/css" href="../css/imgmove.css" />
		<script src="../js/search.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/imgmove.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<!--电脑商城logo-->
			<div class="row">
				<div class="col-md-3">
					<a href="index.html">
						<img src="../images/index/stumalllogo.png" />
					</a>
				</div>
				<!--快捷选项-->
				<div class="col-md-9 top-item">
					<ul class="list-inline pull-right">
						<li><a href="favorites.html"><span class="fa fa-heart"></span>&nbsp;收藏</a></li>
						<li class="li-split">|</li>
						<li><a href="orders.html"><span class="fa fa-file-text"></span>&nbsp;订单</a></li>
						<li class="li-split">|</li>
						<li><a href="cart.html"><span class="fa fa-cart-plus"></span>&nbsp;购物车</a></li>
						<li class="li-split">|</li>
						<li>
							<!--下列列表按钮 ：管理-->
							<div class="btn-group">
								<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
									<span id="top-dropdown-btn"><span class="fa fa-gears"></span>&nbsp;管理 <span class="caret"></span></span>
								</button>
								<ul class="dropdown-menu top-dropdown-ul" role="menu">
									<li><a href="password.html">修改密码</a></li>
									<li><a href="userdata.html">个人资料</a></li>
									<li><a href="upload.html">上传头像</a></li>
									<li><a href="address.html">收货管理	</a></li>
								</ul>
							</div>
						</li>
						<li class="li-split">|</li>
						<li><a href="login.html"><span class="fa fa-user"></span>&nbsp;登录</a></li>
					</ul>
				</div>
			</div>
		</header>
		<!--导航 -->
		<!--分割导航和顶部-->
		<div class="row top-nav">
			<div class="col-md-6">
				<ul class="nav nav-pills">
					<li>
						<a href="#"></a>
					</li>
					<li class="active"><a href="index.html"><span class="fa fa-home"></span></a></li>
					<li><a href="#">秒杀</a></li>
					<li><a href="#">优惠券</a></li>
					<li><a href="#">电脑VIP</a></li>
					<li><a href="#">外卖</a></li>
					<li><a href="#">超市</a></li>
				</ul>
			</div>
			<div class="col-md-6">
				<form action="search.html" class="form-inline pull-right" role="form">
					<div class="form-group">
						<input type="text" class="form-control" id="search" name="search" placeholder="请输入商品名称进行搜索">
					</div>
					<button type="submit" class="btn btn-default btn-sm"><span class="fa fa-search"></span></button>
				</form>
			</div>
		</div>
		<!--头部结束-->
		<!--导航结束-->
		<div class="container">
			<div class="col-md-offset-1 col-md-10" id="search-result"></div>
			<div class="col-md-offset-1 col-md-10" id="search-list">
				<div class="col-md-3">
					<div class="goods-panel">
						<img src="../images/portal/14LenovoYOGA710%20_gold/collect.png" class="img-responsive" />
						<p>¥3398.00</p>
						<p class="text-row-3"><a href="product.html"><small>联想（Lenovo）YOGA710 14英寸触控笔记本（i7-7500U 8G 256GSSD 2G独显 全高清IPS 360°翻转 正版office）金</small></a></p>
						<span>
						<a href="javascript:void(0)" class="btn btn-default btn-xs add-fav"><span class="fa fa-heart-o"></span>加入收藏</a>
						<a href="cart.html" class="btn btn-default btn-xs add-cart"><span class="fa fa-cart-arrow-down"></span>加入购物车</a>
						</span>
					</div>
				</div>

			</div>
			<div class="col-md-offset-1 col-md-10">
				<p align="center" id="page-list">
<!--					<a href="#">上一页</a>-->
<!--					<a href="#">1</a>-->
<!--					<a href="#">2</a>-->
<!--					<a href="#">3</a>-->
<!--					<a href="#">下一页</a>-->
				</p>
			</div>
		</div>
		<script>
			function getUrlParam(id) {
				var regExp = new RegExp('([?]|&)' + id+ '=([^&]*)(&|$)');
				var result = window.location.href.match(regExp);
				if (result) {
					return decodeURIComponent(result[2]);
				} else {
					return null;
				}

			};

				$(document).ready(function() {
					var ctid = getUrlParam("Ctid");
					if(ctid!=null){
						//加载从菜单点进来的
						showCtidList(ctid);
					}
					else{
						showSearchList();
					}

			});
				// function showCtidList(ctid){
				// 	//发送ajax请求根据Ctid来查询产品列表
				// 	$("#search-list").empty();
				// 	$.ajax({
				// 		url: "/search/listForCid/"+ctid,
				// 		type: "get",
				// 		contentType:"application/json;charset=UTF8",
				// 		dataType: "JSON",
				// 		success: function(res) {
				// 			// alert(res.data.search)
				// 			var sDiv="<b id='searchFOR'>"+res.data.search+"</b>&nbsp;<small>搜索结果：</small>";
				// 			$("#search-result").append(sDiv);
				//
				// 			//展示需要的元素
				// 			replaceList(res);
				// 			//展示分页列表
				// 			replacePageList(res);
				//
				// 		}
				// 	});
				// }
				function showSearchList(){
					var search=decodeURIComponent(location.search.substr(1).split("=")[1]);//search=%E7%AC%94%E8%AE%B0%E6%9C%AC
					// alert(search)
					$("#search-list").empty();
					$.ajax({
						url: "/search/list",
						data: '{"search":"'+search+'","currentPage":1,"pageSize":12}',
						type: "POST",
						contentType:"application/json;charset=UTF8",
						dataType: "JSON",
						success: function(res) {
							// alert(res.data.search)
							var sDiv="<b id='searchFOR'>"+res.data.search+"</b>&nbsp;<small>搜索结果：</small>";
							$("#search-result").append(sDiv);

							//展示需要的元素
							replaceList(res);
							//展示分页列表
							replacePageList(res);

						}
					});
				}
				function goPage(currentPage,totalPage){
					var search=decodeURIComponent(location.search.substr(1).split("=")[1]);
					// var search=$("#searchFOR").val();//搜索的内容
					// alert(search)
					if (currentPage<=0){
						alert("已经是第一页啦");
					}
					else if(currentPage>totalPage){
						alert("已经到底啦");
					}
					else{
						// 发送ajax请求查询xx页
						$.ajax({
							url: "/search/list",
							data: '{"search":"'+search+'","currentPage":"'+currentPage+'","pageSize":12}',
							type: "POST",
							contentType:"application/json;charset=UTF8",
							dataType: "JSON",
							success: function(res) {
								// $("#search-result").empty();
								// var sDiv = "<b id='searchFOR'>" + res.data.search + "</b>&nbsp;<small>搜索结果：</small>";
								// $("#search-result").empty();
								// $("#search-result").append(sDiv);

								//展示分页列表
								$("#page-list").empty();
								replacePageList(res);

								//展示需要的元素
								replaceList(res);
							}
						})
					}

				}
				function replacePageList(res){
					//展示分页列表
					var currentPage = res.data.currentPage;
					var totalPage=res.data.totalPage;
					// var lastPage="<a href=\"#\" onclick='goPage("+(currentPage>1?currentPage-1:currentPage)+")' id='lastPage'>上一页</a>";
					var lastPage="<a href=\"#\" onclick='goPage("+(currentPage-1)+','+totalPage+")' id='lastPage'>上一页</a>";
					$("#page-list").append(lastPage);

					for(var i=0;i<totalPage;i++){
						var page="<a href=\"#\" onclick='goPage("+(i+1)+','+totalPage+")'>"+(i+1)+"</a>";
						$("#page-list").append(page);
					}
					// var nextPage="<a href=\"#\" onclick='goPage("+(currentPage<totalPage?currentPage+1:currentPage)+")' id='nextPage'>下一页</a>";
					var nextPage="<a href=\"#\" onclick='goPage("+(currentPage+1)+','+totalPage+")' id='nextPage'>下一页</a>";
					$("#page-list").append(nextPage);
				}

				function replaceList(res){
					var list=res.data.pageList;
					for(var i=0;i<list.length;i++){
						var div="<div class=\"col-md-3\">\n" +
								"<div class=\"goods-panel\">\n" +
								"<img src=\".."+list[i].image+"collect.png\" class=\"img-responsive\" />\n" +
								"<p>¥"+list[i].price+"</p>\n" +
								"<p class=\"text-row-3\"><a href=\"product.html?id="+list[i].id+"\"><small>"+list[i].title+"</small></a></p>\n" +
								"<span>\n" +
								"<a href=\"javascript:void(0)\" class=\"btn btn-default btn-xs add-fav\"><span class=\"fa fa-heart-o\"></span>加入收藏</a>\n" +
								"<a href=\"cart.html\" class=\"btn btn-default btn-xs add-cart\"><span class=\"fa fa-cart-arrow-down\"></span>加入购物车</a>\n" +
								"</span>\n" +
								"</div>\n" +
								"</div>"
						$("#search-list").append(div);
					}
				}


		</script>

		<!--页脚开始-->
		<div class="clearfix"></div>
		<footer class="footer">
			<!-- 品质保障，私人定制等-->
			<div class="text-center rights container">
				<div class="col-md-offset-2 col-md-2">
					<span class="fa fa-thumbs-o-up"></span>
					<p>品质保障</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-address-card-o"></span>
					<p>私人订制</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-graduation-cap"></span>
					<p>学生特供</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-bitcoin"></span>
					<p>专属特权</p>
				</div>
			</div>
			<!--联系我们、下载客户端等-->
			<div class="container beforeBottom">
				<div class="col-md-offset-1 col-md-3">
					<div><img src="../images/index/stumalllogo.png" alt="" class="footLogo" /></div>
					<div><img src="../images/index/footerFont.png" alt="" /></div>
				</div>
				<div class="col-md-4 callus text-center">
					<div class="col-md-4">
						<ul>
							<li>
								<a href="#">
									<p>买家帮助</p>
								</a>
							</li>
							<li><a href="#">新手指南</a></li>
							<li><a href="#">服务保障</a></li>
							<li><a href="#">常见问题</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li>
								<a href="#">
									<p>商家帮助</p>
								</a>
							</li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">商家后台</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li>
								<a href="#">
									<p>关于我们</p>
								</a>
							</li>
							<li><a href="#">关于圆心</a></li>
							<li><a href="#">联系我们</a></li>
							<li>
								<span class="fa fa-wechat"></span>
								<span class="fa fa-weibo"></span>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-4">
					<div class="col-md-5">
						<p>电脑商城客户端</p>
						<img src="../images/index/ios.png" class="lf">
						<img src="../images/index/android.png" alt="" class="lf" />
					</div>
					<div class="col-md-6">
						<img src="../images/index/erweima.png">
					</div>
				</div>
			</div>
			<!-- 页面底部-备案号 #footer -->
			<div class="col-md-12 text-center bottom">
				Copyright © 2022 dnsc.cn All Rights Reserved 京ICP备08963888号-45 <a target="_blank" href="http://www.dnsc.cn/">圆心科技集团有限公司</a> 版权所有
			</div>
		</footer>
		<!--页脚结束-->
	</body>

</html>